<template>
	<view class="content">
		<view class="tabs">
			<view class="item" :class="type == 1 ? 'itemselected' : ''" @click="ontab(1)">综合</view>
			<view class="item" :class="type == 2 ? 'itemselected' : ''" @click="ontab(2)">
				<view>价格</view>
				<view class="sort">
					<image v-if="price_desc == 0" style="margin-bottom: 6rpx;" src="../../static/qie_xia.png"></image>
					<image v-if="price_desc == 0" src="../../static/qie_shang.png"></image>
					
					<image v-if="price_desc == 1" style="margin-bottom: 6rpx;" src="../../static/qie_xia_selected.png"></image>
					<image v-if="price_desc == 1" src="../../static/qie_shang.png"></image>
					
					<image v-if="price_desc == 2" style="margin-bottom: 6rpx;" src="../../static/qie_xia.png"></image>
					<image v-if="price_desc == 2" src="../../static/qie_shang_selected.png"></image>
				</view>
			</view>
			<view class="item" :class="type == 3 ? 'itemselected' : ''" @click="ontab(3)">
				<view>销量</view>
				<view class="sort">
					<image v-if="sale_desc == 0" style="margin-bottom: 6rpx;" src="../../static/qie_xia.png"></image>
					<image v-if="sale_desc == 0" src="../../static/qie_shang.png"></image>
					
					<image v-if="sale_desc == 1" style="margin-bottom: 6rpx;" src="../../static/qie_xia_selected.png"></image>
					<image v-if="sale_desc == 1" src="../../static/qie_shang.png"></image>
					
					<image v-if="sale_desc == 2" style="margin-bottom: 6rpx;" src="../../static/qie_xia.png"></image>
					<image v-if="sale_desc == 2" src="../../static/qie_shang_selected.png"></image>
				</view>
			</view>
			<view class="item" @click="ontab(4)">
				<image v-if="lisType" src="../../static/category1.png"></image>
				<image v-else src="../../static/category2.png"></image>
			</view>
		</view>
		<!-- 商品列表 -->
		<view class="goods" v-if="lisType">
		  <view class="item" v-for="(item, index) in goodsList" @click="onGoodsItem(item.sku_id)">
			<image class="image" :src="item.image" mode="aspectFill"></image>
			<view class="bottom">
				<view class="name">{{item.name}}</view>
				<view class="price">￥{{item.sell_price}}</view>
				<view class="sales">
					<text>已售{{item.sales}}</text>
					<image class="cart" src="../../static/cart.png"></image>
				</view>
			</view>
		  </view>
		</view>
		
		<view class="goodslist" v-else>
		  <view class="item" v-for="(item, index) in goodsList" @click="onGoodsItem(item.sku_id)">
			<image class="image" :src="item.image" mode="aspectFill"></image>
			<view class="right">
				<view class="name">{{item.name}}</view>
				<view class="price">
					<view class="sell">￥{{item.sell_price}}</view>
					<view class="market">￥{{item.market_price}}</view>
				</view>
				<view class="sales">
					<text>已售{{item.sales}}</text>
					<image class="cart" src="../../static/cartdown.png"></image>
				</view>
			</view>
		  </view>
		</view>
		
	</view>
</template>

<script>
	
	import { Goods } from '@/utils/model/goods-model.js';
	var goods = new Goods();
	export default {
		data() {
			return {
				type: 1,
				lisType: true,
				goodsList: [],
				category_id: 0,
				price_desc: 0,
				sale_desc: 0
			}
		},
		onLoad(options) {
			console.log(options)
			this.category_id = options.category_id
			this.getList(this.category_id);
		},
		
		methods: {
			ontab(type){
				this.type = type
				
				if(type == 1){
					
					this.price_desc = 0;
					this.sale_desc = 0;
					
					
					this.getList(this.category_id, 'asc', 'asc');
				}else if(type == 2){
					let price = 'asc'
					if(this.price_desc == 0){
						this.price_desc = 1;
						price = 'desc'
					}else if(this.price_desc == 1){
						this.price_desc = 2;
						price = 'asc'
					}else if(this.price_desc == 2){
						this.price_desc = 1;
						price = 'desc'
					}
					
					this.sale_desc = 0;
					
					
					this.getList(this.category_id, price, 'asc');
				}else if(type == 3){
					let sale = 'asc'
					if(this.sale_desc == 0){
						this.sale_desc = 1;
						sale = 'desc'
					}else if(this.sale_desc == 1){
						this.sale_desc = 2;
						sale = 'asc'
					}else if(this.sale_desc == 2){
						this.sale_desc = 1;
						sale = 'desc'
					}
					
					this.price_desc = 0;
					
					this.getList(this.category_id, 'asc', sale);
				}else if(type == 4){
					this.lisType = !this.lisType
				}
				
				
			},
			getList(category_id = 0, price = 'asc', sales = 'asc'){
				goods.getList(category_id, price, sales).then(res => {
					if (res.code == 1) {
						this.goodsList = res.data.list
					}
				}).catch(err => {
					console.log(err)
				})
			},
			onGoodsItem(sku_id){
				uni.navigateTo({
					url: '/pages/goods/detail?id='+sku_id
				})
			}

		}
	}
</script>

<style>
	page{
		background-color: #F5F5F5;
	}
</style>
 
<style scoped lang="scss">
	@import '~@/pages/goods/list.scss';
</style>